<template>
<!-- 视频组件 -->
  <div class="videoComponent">
    <!-- 预览控制区 -->
    <!-- poster:视频封面图片 -->
    <div  class="previewStyle" :style="{paddingLeft:formData.margins/2+ 'px',paddingRight:formData.margins/2+ 'px',paddingTop:formData.marginTop/2 + 'px',paddingBottom:formData.marginBottom/2 + 'px'}">
      <video id="video" :controls="formData.progress == 1? true:false" autoplay :poster="formData.posterImg" width="100%" :height="formData.size == '2'?'auto':'320px'" :style="{borderRadius:formData.angle + 'px'}">
        <source :src="formData.srcUrl"/>
       您的浏览器不支持 video 标签。
      </video>
    </div>
    <!-- <div :style="{padding:formData.space + 'px',background:isBgColor }">
      <div v-show="formData.tabsNum == 2" :style="{borderTopWidth:'1.5px',borderTopStyle:formData.line,borderTopColor:formData.lineColor}" />
    </div> -->
    <!-- 编辑工作区 -->
    <div v-if="isShowEdit" class="design-editor-item design-hide-class">
      <el-scrollbar wrap-class="scroll-content">
        <div class="rightWrap">
          <div class="design-editor-component-title">视频组件</div>
           <div class="tabRadioWrap">
            <el-radio-group v-model="formData.tabsNum" style="width: 100%;">
              <el-radio-button label="1">仅播放</el-radio-button>
              <el-radio-button label="2">链接</el-radio-button>
            </el-radio-group>
          </div>
          <div class="tab-main">
            <el-tabs v-model="formData.tabActive" tab-position="top">
            <el-tab-pane label="内容设置" name="0">
              <div class="styleWrap">
                <div class="set-cont">
                  <div class="set-cont-text"></div>
                  <div class="video-item" v-show="this.formData.videoName">
                    <span><i class="video-item-icon el-icon-s-operation" /> 视频：{{ this.formData.videoName }}</span>
                  </div>
                  <el-button icon="el-icon-plus" @click="addClick">添加视频</el-button>
                </div>
                <div class="titleStyle">播放设置</div>
                 <div class="dis al_item dis_ju_spb w100e item_mar" v-show="formData.tabsNum == 2">
                  <div class="dis al_item">
                    <span>引导按钮</span>
                  </div>
                  <el-radio-group v-model="formData.guide" size="small">
                    <el-radio-button label="1">显示</el-radio-button>
                    <el-radio-button label="2">隐藏</el-radio-button>
                  </el-radio-group>
                 </div>
                 <div class="block" v-show="formData.tabsNum == 2">
                  <span>按钮内容</span>
                  <el-input type="text" v-model="formData.content" maxlength="4" show-word-limit />
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>进度条</span>
                  </div>
                  <el-radio-group v-model="formData.progress" size="small">
                    <el-radio-button label="1">显示</el-radio-button>
                    <el-radio-button label="2">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar" v-show="formData.tabsNum == 2">
                  <div class="dis al_item">
                    <span>自动播放</span>
                    <span class="text_mar" style="color:#bebebe">仅支持小程序</span>
                  </div>
                  <div class="al_switch">
                    <span>{{formData.isSwitch == true ? '已开启':'已关启'}}</span>
                    <el-switch v-model="formData.isSwitch"></el-switch>
                  </div>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>封面图</span>
                  </div>
                 <el-radio-group v-model="formData.cover">
                  <el-radio label="1">原视频封面</el-radio>
                  <el-radio label="2">自定义封面</el-radio>
                </el-radio-group>
                </div>
                <div v-show="formData.cover === '2'">
                  <div  class="cont-image" @click="changeImg" v-if="!this.formData.posterImg">
                    <span>+</span>
                    <p class="re-choose-img">添加图片</p>
                  </div>
                  <div class="cont-image cont-images" v-else>
                    <el-image :src="formData.posterImg" fit="cover"></el-image>
                    <div class="cont-images-name" @click="changeImg">更换图片</div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="样式设置" name="1">
              <div class="styleWrap">
                <div class="titleStyle">
                  内容样式
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>视频角度</span>
                  </div>
                  <el-radio-group v-model="formData.angle" size="small">
                    <el-radio-button label="0">直角</el-radio-button>
                    <el-radio-button label="16">圆角</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>视频尺寸</span>
                  </div>
                  <el-radio-group v-model="formData.size" size="small">
                    <el-radio-button label="1">1:1</el-radio-button>
                    <el-radio-button label="2">自适应</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
              <div class="styleWrap">
                <div class="titleStyle">
                  组件样式
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>页边距</span>
                    <span class="text_mar">{{ formData.margins }}px</span>
                  </div>
                  <el-radio-group v-model="formData.margins" size="small">
                    <el-radio-button label="0">无</el-radio-button>
                    <el-radio-button label="30">有</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>上边距</span>
                    <span class="text_mar">{{ formData.marginTop }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginTop" size="small">
                    <el-radio-button label="0">小</el-radio-button>
                    <el-radio-button label="15">中</el-radio-button>
                    <el-radio-button label="30">大</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>下边距</span>
                    <span class="text_mar">{{ formData.marginBottom }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginBottom" size="small">
                    <el-radio-button label="0">小</el-radio-button>
                    <el-radio-button label="15">中</el-radio-button>
                    <el-radio-button label="30">大</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <el-dialog title="我的视频" :visible.sync="dialogTableVisible">
      <chooseVideo v-if="dialogTableVisible"  @videoBox="videoBox" />
      <div class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="comfirm">确 定</el-button>
      </div>
    </el-dialog>
     <chooseImages  ref="pics" :can-choose-images-num="canChooseImagesNum" :max="canChooseImagesNum" @chooseImagesEnd="chooseImagesEnd" @getUrl="getPicsUrl" />
  </div>
</template>

<script>
import index from './index.js'

export default index
</script>
